<template>
  <div class="project_table">
    <el-table
      :data="list"
      stripe
      height="calc(100% - 50px)"
      :header-cell-style="{background: '#fafafa', color:　'#000'}"
    >
      <el-table-column label="序号" type="index"></el-table-column>
      <el-table-column label="任务名称" prop="name" class-name="c_blue"></el-table-column>
      <el-table-column label="所属阶段" prop="stageName"></el-table-column>
      <el-table-column label="所属项目" prop="projectName" class-name="c_blue"></el-table-column>
      <el-table-column label="负责人" prop="managerName"></el-table-column>
      <el-table-column label="任务进度" prop="taskProgress">
        <template slot-scope="scope">
          <my-progress :progress="scope.row.taskProgress" :delayed="scope.row.taskStatus == 4" :key="scope.row.id"></my-progress>
        </template>
      </el-table-column>
      <el-table-column label="开始时间" prop="planStartDate"></el-table-column>
      <el-table-column label="完成时间" prop="planEndDate"></el-table-column>
      <el-table-column label="状态" prop="taskStatusName">
        <template slot="header" slot-scope="scope">
          <el-dropdown @command="statusFilter">
            <span>
              状态<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item :command="1" :class="{'c_blue':  postData.taskStatus == 1}">未开始</el-dropdown-item>
              <el-dropdown-item :command="2" :class="{'c_blue':  postData.taskStatus == 2}">超时未开始</el-dropdown-item>
              <el-dropdown-item :command="3" :class="{'c_blue':  postData.taskStatus == 3}">进行中</el-dropdown-item>
              <el-dropdown-item :command="4" :class="{'c_blue':  postData.taskStatus == 4}">已延迟</el-dropdown-item>
              <el-dropdown-item :command="5" :class="{'c_blue':  postData.taskStatus == 5}">已完成</el-dropdown-item>
              <el-dropdown-item :command="6" :class="{'c_blue':  postData.taskStatus == 6}">待审核</el-dropdown-item>
              <el-dropdown-item :command="7" :class="{'c_blue':  postData.taskStatus == 7}">已关闭</el-dropdown-item>
              <el-dropdown-item :command="0" :class="{'c_blue':  postData.taskStatus == 0}">全选</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
        <template slot-scope="scope">
          <status-tag :name="scope.row.taskStatusName" :status="scope.row.taskStatus" type="task" :key="scope.row.id"></status-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <div>
            <el-button type="primary" size="mini" @click="$router.push({path: '/task/taskDetail', query: {id: scope.row.id}})">详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="current"
        :page-size="size"
        :total="total"
        @current-change="pageChange"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import httpSer from "@/http";

import StatusTag from "@/components/statusTag";
import MyProgress from "@/components/myProgress";
export default {
  props: {
    searchVal: String
  },
  data() {
    return {
      list: [],
      size: 10,
      total: 0,
      current: 1,
      postData: {
        taskStatus: 0,
        name: ''
      }
    };
  },
  created() {},
  mounted() {
    this.getUserTask();
  },
  methods: {
    getUserTask() {
      let url = "/taskInfo/selectTaskInfoDisplayPage";
      let data = {
        size: this.size,
        current: this.current
      };
      Object.assign(data, this.postData);
      httpSer.post(url, data).then(res => {
        let list = res.records;
        list.forEach(item => {
          item.taskProgress = ((item.taskProgress || 0) * 100).toFixed(0) * 1;
          item.planStartDate = (item.planStartDate || " ").split(" ")[0];
          item.planEndDate = (item.planEndDate || " ").split(" ")[0];
          item.taskStatusName = this.getTaskStatusName(item.taskStatus);
        });
        this.list = list;

        this.total = res.total * 1;
        this.current = res.current * 1;
      });
    },
    pageChange(current) {
      this.current = current * 1;
      this.getUserTask();
    },
    getTaskStatusName(status) {
      // 状态(1=未开始；2=超时未开始；3=进行中；4=已延迟；5=已完成；6=待审核；7=已关闭)
      switch (status) {
        case 1: return "未开始"; break;
        case 2: return "超时未开始"; break;
        case 3: return "进行中"; break;
        case 4: return "已延迟"; break;
        case 5: return "已完成"; break;
        case 6: return "待审核"; break;
        case 7: return "已关闭"; break; 
        default: return "未定义"; break;
      }
    },
    pageChange(current) {
      this.current = current * 1;
      this.getUserTask();
    },
    sortChange({ column, prop, order }) {
      console.log(column, prop, order);
    },
    projectTypeFilter(type) {
      console.log(type);
    },
    statusFilter(status){
      this.postData.taskStatus = status
      this.current = 1;
      this.getUserTask()
    }
  },
  watch: {
    searchVal(newVal, oldVal){
      //搜索
      this.postData.name = newVal
      this.current = 1;
      this.getUserTask()
    }
  },
  filters: {},
  components: { StatusTag, MyProgress }
};
</script>

<style lang="less" scope>
@import "./index.less";
</style>